<template>
  <div content="home">
    <Header></Header>
    <Swipe :swiperList="swiperList"></Swipe>
    <Icons :iconList="iconList"></Icons>
    <Recommend :recommendList="recommendList"></Recommend>
    <Weekend :weekendList="weekendList"></Weekend>
  </div>
</template>

<script>
import Header from './components/Header.vue'
import Swipe from './components/Swipe.vue'
import Icons from './components/Icons.vue'
import Recommend from './components/Recommend.vue'
import Weekend from './components/Weekend.vue'

import {mapState} from 'vuex'

export default {
  name: 'Home',
  data () {
    return {
      lastCity: '',
      iconList: [],
      recommendList: [],
      swiperList: [],
      weekendList: []
    }
  },
  components: {
    Header,
    Swipe,
    Icons,
    Recommend,
    Weekend
  },
  methods: {
    getIndexList () {
      this.$ajax.get('http://localhost:8080/static/mock/index.json').then(result => {
        if (result.status === 200) {
          this.iconList = result.data.data.iconList
          this.recommendList = result.data.data.recommendList
          this.swiperList = result.data.data.swiperList
          this.weekendList = result.data.data.weekendList
        }
      })
    }
  },
  mounted () {
    // console.log('mounted')
    this.lastCity = this.cityName
    this.getIndexList()
  },
  activated () {
    // 如果当前被选择城市被改变的话就重新发起 Ajax 请求
    // console.log('activated')
    if (this.lastCity !== this.cityName) {
      this.getIndexList()
    }
  },
  computed: {
    ...mapState(['cityName'])
  }
}
</script>

<style lang="stylus" scoped>
</style>
